import React from 'react'
import './NewArticles.css'
import { Input, Select, Radio, Button, Upload, Modal} from 'antd'
import {  PlusOutlined } from '@ant-design/icons';
import axios from '../../../utils/http'
import {ADDADPHOTOS,ADDARTICLE} from '../../../utils/api'


const { Option } = Select;
class NewArticles extends React.Component {
    constructor() {
        super()
        this.state = {
             // 图片上传
             previewVisible: false,
             previewImage: '',
             previewTitle: '',
             // 上传文件
             fileList: [
             ],
             data:{
             },
          
        }
    }


    // 文章标题
    wzbt=(e)=>{
        let obj = {...this.state.data}
        obj.amAt=e.target.value
        this.setState({
            data:{...obj}
        })
    }
    //  文章分类下拉框
    onChange = (value) => {
        // console.log(`selected ${value}`);
        let obj = {...this.state.data.articleClass}
        obj.articleClass={articleCname:value}
        this.setState({
            data:{...obj}
        })

    }
    // 是否显示
    sfxs = (e) => {
        // console.log(`selected ${value}`);
        let obj = {...this.state.data}
        obj.amDs=e.target.value
        this.setState({
            data:{...obj}
        })

    }
    // 关键字
    gjz = (e) => {
        // console.log(`selected ${value}`);
        let obj = {...this.state.data}
        obj.amKw=e.target.value
        this.setState({
            data:{...obj}
        })

    }

    // 网页描述
    wyms = (e) => {
        // console.log(`selected ${value}`);
        let obj = {...this.state.data}
        obj.amWpd=e.target.value
        this.setState({
            data:{...obj}
        })
    }

     // 跳转链接
     tzlj = (e) => {
        // console.log(`selected ${value}`);
        let obj = {...this.state.data}
        obj.amJl=e.target.value
        this.setState({
            data:{...obj}
        })
    }

     // 文章类容
     wzlr = (e) => {
        // console.log(`selected ${value}`);
        let obj = {...this.state.data}
        obj.amAc=e.target.value
        this.setState({
            data:{...obj}
        })
    }



    // 图片上传
        //广告图片
    // 这个就是生成预览
    getBase64 = (file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    }
      

    handleCancel = () => this.setState({ previewVisible: false });


    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await this.getBase64(file.originFileObj);
        }

        this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
        });
    };

    handleChange = ({ fileList }) => this.setState({ fileList });



// 确定提交
buttonAdd= async()=>{
    console.log(this.state.fileList);
        let formData=new FormData()
        for (let index = 0; index < this.state.fileList.length; index++) {
            formData.append('file',this.state.fileList[index].originFileObj)
        }
        await axios({
            url:ADDADPHOTOS,
            method:'post',
            data:formData
        }).then(data=>{
            let obj = {...this.state.data}
            obj.amSp=data.data.data[0]
            obj.amBp=data.data.data[0]
            this.setState({
                data:{...obj}
            })
        })   

        console.log(this.state.data);
     await axios({
        url:ADDARTICLE,
        method:'post',
        data:this.state.data
    }).then(data=>{
        console.log(data);
    })

}



    render() {
         //  广告图片
         const { previewVisible, previewImage, fileList, previewTitle } = this.state;
         const uploadButton = (
             <div>
                 <PlusOutlined />
                 <div style={{ marginTop: 8 }}>Upload</div>
             </div>
         );
        return (
            <div className='NewArticles'>
                <div><span>文章标题:</span>
                    <span><Input placeholder="选择配送方式(文章标题)"  onChange={this.wzbt}/></span>
                </div>
                <div><span>文章分类:</span>
                    <span><Select
                        showSearch
                        style={{ width: 200 }}
                        placeholder="请选择"
                        optionFilterProp="children"
                        onChange={this.onChange}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    >
                        <Option value="帮助分类">帮助分类</Option>
                        <Option value="帮助中心">帮助中心</Option>
                        <Option value="文章推送">文章推送</Option>
                    </Select></span>
                </div>
                <div>
                    <span>是否显示：</span>
                    <Radio.Group name="radiogroup" defaultValue={1} onChange={this.sfxs}>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </div>
                <div><span>关键字:</span>
                    <span><Input  onChange={this.gjz}/></span>
                </div>
                <div><span>网页描述:</span>
                    <span><Input   onChange={this.wyms} /></span>
                </div>
                <div style={{ marginBottom: 16 }}><span>跳转链接:</span>
                <span><Input   onChange={this.tzlj}/></span>
                </div>
                <div><span>图片上传:</span>
                <Upload
                        action=''
                        beforeUpload={()=>{return false}}
                        listType="picture-card"
                        fileList={fileList}
                        onPreview={this.handlePreview}
                        onChange={this.handleChange}
                    >
                        {fileList.length >= 1 ? null : uploadButton}
                    </Upload>
                    <Modal
                        visible={previewVisible}
                        title={previewTitle}
                        footer={null}
                        onCancel={this.handleCancel}
                    >
                        <img alt="example" style={{ width: '100%' }} src={previewImage} />
                    </Modal>

                </div>
                <div><span>文章类容:</span>
                    <span><Input  onChange={this.wzlr} /></span>
                </div>

                <div>
                    <Button type="primary" onClick={this.buttonAdd}>确定</Button>
                </div>

            </div>
        )
    }

}

export default NewArticles